<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<button>卸载</button>
<div id="root"></div>
</body>
<script type="text/babel">
    // 卸载方式二：通过unmount方法
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component{
        render(){
            return (
                <div>
                    <button onClick={()=>{
                        root.unmount();// 卸载
                    }}>APP->卸载</button>
                    <h3>App</h3>
                </div>
            )
        }
        componentWillUnmount(){
            console.log("componentWillUnmount")
        }
    }
    root.render(<App/>)

    const btn = document.querySelector("button");
    btn.onclick = function(){
        root.unmount();
    }






    // const root = ReactDOM.createRoot(document.querySelector("#root"));
    // 卸载方式 一：通过 &&
    // class App extends React.Component{
    //     state = {
    //         isShow:true
    //     }
    //     constructor() {
    //         super();
    //         console.log("1-constructor")
    //     }
    //     UNSAFE_componentWillMount(){
    //         console.log("2-UNSAFE_componentWillMount")
    //     }
    //     render(){
    //         console.log("3-render")
    //         return (
    //             <div>
    //                 <button onClick={()=>{
    //                     this.setState({
    //                         isShow:!this.state.isShow
    //                     })
    //                 }}>显示与隐藏</button>
    //                 {
    //                     this.state.isShow && <Child/>
    //                 }
    //             </div>
    //         )
    //     }
    //     componentDidMount(){
    //         console.log("8-componentDidMount")
    //     }
    //
    // }
    // class Child extends React.Component{
    //     state = {
    //         num:1
    //     }
    //     constructor() {
    //         super();
    //         console.log("4-child->constructor")
    //     }
    //     UNSAFE_componentWillMount(){
    //         console.log("5-child->UNSAFE_componentWillMount")
    //     }
    //     render(){
    //         console.log("6-child->render")
    //         return (
    //             <div>
    //                 <h3>Child:{this.state.num}</h3>
    //             </div>
    //         )
    //     }
    //     componentDidMount(){
    //         this.timer = setInterval(()=>{
    //             console.log(11111111111)
    //             this.setState({
    //                 num:this.state.num+1
    //             })
    //         },1000)
    //
    //         console.log("7-child->  componentDidMount")
    //     }
    //     componentWillUnmount(){
    //         // 即将销毁之前要执行的钩子函数。
    //         clearInterval(this.timer)
    //         console.log("componentWillUnmount")
    //     }
    // }
    // root.render((
    //     <App></App>
    // ))
</script>
</html>